let json_polygon={
    type: "FeatureCollection",
    features: [],
}
mapboxgl.accessToken = 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ';
let map =  new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-streets-v10', // stylesheet location
    center: [103.017915 , 30.792762],//海南[110.53097055 ,18.79052175],  //[116.79507,32.65542], // starting position [lng, lat]
    zoom: 12, // starting zoom
    hash: false,
    pitch: 45,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
    bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
    antialias: true, //抗锯齿，通过false关闭提升性能
    projection: "globe",
})

//地图导航
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');

// 比例尺
var scale = new mapboxgl.ScaleControl({
    maxWidth: 100,
    unit: "metric"
});
map.addControl(scale,"bottom-left");

// 全图
map.addControl(new mapboxgl.FullscreenControl());
// 定位
map.addControl(
    new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        },
        trackUserLocation: true
    })
);

map.on("load", () => {
    // map.setFog({
    //     color: "rgb(186, 210, 235)",
    //     "high-color": "rgb(36, 92, 223)",
    //     "horizon-blend": 0.02,
    //     "space-color": "rgb(11, 11, 25)",
    //     "star-intensity": 0.6,
    // });

    map.addSource("drew_polygon", {
        type: "geojson",
        data: json_polygon,
    });
    map.addLayer({
        id: "drew_polygon",
        type: "fill",
        source: "drew_polygon",
        paint: {
            "fill-color": "#FF5511 ",
            "fill-opacity": 0.3,
        },
    });
    map.addLayer({
        id: "electronic_fence_title",
        type: "symbol",
        source: "drew_polygon",
        layout: {
            visibility: "visible",
            "text-field": "{fenceName}",
            "text-size": 14,
        },
        paint: {
            "text-halo-color": "#00FF00",
            //'text-halo-width': 2
        },
    });

    initData()

});
function  initData(){
    map.flyTo({
        center: [Number(fence.longitude),Number(fence.latitude)], // 中心点
        zoom: 12, // 缩放比例
        pitch: 45 // 倾斜度
    })
    json_polygon.features = [];
    map.getSource("drew_polygon").setData(json_polygon);
    let features = JSON.parse(fence.coordinates);
    features[0].properties["fenceName"] = fence.fenceName;
    features[0].properties["layerId"] = fence.layerId;
    features[0].properties["longitude"] = fence.longitude;
    features[0].properties["latitude"] = fence.latitude;
    features[0].properties["remarks"] = fence.remarks;
    json_polygon.features.push(features[0]);
    map.getSource("drew_polygon").setData(json_polygon);

    new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false
    }).setLngLat([Number(fence.longitude),Number(fence.latitude)])
      .setHTML(`<div class="makerTop"><h2 class="markerHear" > 详情信息 </h2></div>
                            <div class="markerBody" ><p>围栏名称：${fence.fenceName}</p>
                            <p>围栏标识符：${fence.layerId}</p> 
                            <p>经度: ${fence.longitude}</p>
                            <p>纬度: ${fence.latitude}</p></div>`)
        .addTo(map);
}




